<template>
  <div class="app-container">
    <!--搜索表单-->
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <!--搜索表单-->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="设备名" prop="machineName">
            <el-input
              v-model="queryParams.machineName"
              placeholder="请输入设备名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="运行状态" prop="machineState">
            <el-select
              v-model="queryParams.machineState"
              placeholder="运行状态"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_machine_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="所属区域" prop="areaId">
            <treeselect
              v-model="queryParams.areaId"
              :options="areaOptions"
              :show-count="true"
              clearable
              placeholder="请输入所属区域"
              style="width: 240px"
            />

          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!--折叠面板区域-->
    <el-row :gutter="20">
      <!--折叠面板父级组件-->
      <el-collapse v-model="activeNames" @change="handleChange(machine,index)" v-for="(machine,index) in machineList" :key="index">
        <!--折叠面板子组件-->
        <el-collapse-item>
          <!--折叠面板标题-->
          <template slot="title">
            <el-row>
              <el-col :span="16">
                <h3>{{machine.areaName}}&nbsp;{{machine.machineName}}</h3>
              </el-col>
              <el-col :span="8">
                <dict-tag :options="dict.type.sys_machine_state" :value="machine.machineState"/>
              </el-col>
            </el-row>
          </template>

          <!--折叠面板内容-->
          <div>
            <!--设备信息详情-->
            <el-row :gutter="20">
              <!--照片-->
              <el-col :span="6" :offset="1">
                <el-image
                  style="width: 300px; height: 250px"
                  :src="url"
                  ></el-image>

              </el-col>
              <!--基本数据-->
              <el-col :span="10">

                <el-row>
                  <el-col :span="12">
                    上次开启时间： <label>{{machine.startTime}}</label>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    上次关闭时间：<label>{{machine.endTime}}</label>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    操作人： yexiao
                  </el-col>
                  <el-col :span="6">
                    身份：管理员
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    尺寸： 70×50×100 cm
                  </el-col>
                  <el-col :span="6">
                    重量：79 kg
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <lebel>放电功率</lebel> 220W/h
                  </el-col>
                  <el-col :span="6">
                    <lebel>充电功率</lebel> 75W/h
                  </el-col>
                </el-row>

                <!--设备开关-->
                <el-row :gutter="20">
                  <el-col :offset="8">
                    <template>
                      <el-switch
                        :value="machineList[index].machineState"
                        active-color="#13ce66"
                        inactive-color="#D3D3D3"
                        :active-value="1"
                        :inactive-value="0"
                        @change="(open($event,machine.machineId,index))"
                      ></el-switch>
                    </template>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>

        </el-collapse-item>
      </el-collapse>
    </el-row>
  </div>
</template>

<script>
import {listMachine, machineTreeSelect, updateMachine} from "@/api/machine/machine";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "index",
  dicts: ['sys_machine_state'],
  components: { Treeselect },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //区域树选项
      areaOptions: null,
      // 设备详细数据
      machineList: [],
      //折叠面板参数,代表默认打开name的面板
      activeNames: ['1'],
      value: true,
      // 表单参数
      form: {},
      defaultProps: {

      },
      //图片前缀
      url: "https://img95.699pic.com/photo/60061/4518.jpg_wh300.jpg",


      //图片后缀
      suf:".jpg",

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        machineName: null,
        machineState: null,
        areaId: null
      },

      modifyParams: {
        machineId: null,
        machineState: null
      }
    }
  },

  created() {
    this.getAreaTree();
    this.getList();
  },

  methods: {
    /** 查询设备概览列表 */
    getList() {
      this.loading = true;
      // this.queryParams.params = {};

      listMachine(this.queryParams).then(response => {
        this.machineList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 查询区域下拉树结构 */
    getAreaTree() {
      machineTreeSelect().then(response => {
        this.areaOptions = response.data;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeStartTime = [];
      this.daterangeEndTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 折叠面板方法，面板改变时触发 */
    handleChange(machine,idx) {

    },

    /** 修改设备状态 */
    modifyState(machineState,machineId,index){
      this.modifyParams.machineId = machineId;
      this.modifyParams.machineState = machineState;
      updateMachine(this.modifyParams).then(response => {
        // 成功修改
        if(response.code === 200){
          // 手动赋值
          this.machineList[index].machineState = machineState;
          // 打印信息
          this.$message({
            message: response.msg,
            type: 'success'
          });
        }else{
          // 修改失败
          this.$message({
            message: response.msg,
            type: 'error'
          });
        }

      });
      this.getList();
    },

    /** 弹窗确认 */
    open(machineState,machineId,index) {
      this.$confirm(
        `即将${machineState === 1 ? "开启" : "关闭"}设备, 是否继续？`,
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定操作
        this.modifyState(machineState,machineId,index);
      }).catch(() => {
        // 取消操作
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
